<template>
  <div class="mod-user">
    <el-form :inline="true" @keyup.enter.native="sava()">
      <div class="seacrhMoney" style="display: flex;">
        <el-form-item>
          <span>员工姓名:</span>
          <el-input v-model="employeeName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <span>账号类型:</span>
          <el-select v-model="accountType" placeholder="请选择类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="demand">查询</el-button>
          <el-button type="primary" @click="empty">清空</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 表单 -->
    <div style="background-color: #fff;width:100%">
      <div style="padding: 8px">
        <el-button type="primary" @click="addagree">新增账号</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="dataList" v-loading="dataListLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color" style="width: 100%;" border>
        <template slot="empty">
          <div style="font-size: 14px; text-align: center">暂无数据</div>
        </template>
        <el-table-column prop="employeeName" header-align="center" align="center" label="员工姓名">
        </el-table-column>
        <el-table-column prop="employeeType" header-align="center" align="center" label="账号类型">
        </el-table-column>
        <el-table-column prop="employeeNote" header-align="center" align="center" label="员工备注">
        </el-table-column>
        <el-table-column prop="principals" header-align="center" align="center" label="业务主体">
          <template slot-scope="scope">
            <div>{{scope.row.principals==1?'物业服务':'到家服务'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="legalCompanyName" header-align="center" align="center" label="归属法人公司">
        </el-table-column>
        <el-table-column prop="legalAccountCode" header-align="center" align="center" label="法人公司编码">
        </el-table-column>
        <el-table-column prop="userName" header-align="center" align="center" label="登录账号">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="状态">
          <template slot-scope="scope">
            <div>{{scope.row.status==1?'可用':'不可用'}}</div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="down(scope.row)" v-if="scope.row.status == '1'">禁用账号</el-button>
            <el-button type="text" disable="scope.row.status==1" @click="open(scope.row)" v-if="scope.row.status == '0'">启用账号</el-button>
            <el-button type="text" style="margin-left: 0px;" @click.stop="reset(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 表单dialog -->
    <el-dialog title="新增账号" :visible.sync="dialogFormVisible" width="30%" @closed="closeds($event)">
      <el-form :model="dataForm" :rules="dataRule" label-position="left" label-width="150px" ref="dataForm" @keyup.enter.native="add()">
        <el-form-item label="业务主体" :label-width="formLabelWidth" prop="radio">
          <el-radio v-model="dataForm.radio" label="1" @change="radio">物业服务</el-radio>
          <el-radio v-model="dataForm.radio" label="2" @change="radio1">到家服务</el-radio>
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="employeeName">
          <el-input v-model="dataForm.employeeName"></el-input>
        </el-form-item>
        <el-form-item label="账号类型" :label-width="formLabelWidth" prop="emptypes">
          <el-select v-if="dataForm.radio==1" clearable v-model="dataForm.emptypes" @change="emptypes" placeholder="请选择员工类型" style="width: 180px">
            <el-option v-for="item in emptype" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-if="dataForm.radio==2" clearable v-model="dataForm.emptypes" @change="emptypes" placeholder="请选择员工类型" style="width: 180px">
            <el-option v-for="item in emptype1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工备注" :label-width="formLabelWidth" prop="note">
          <el-input v-model="dataForm.note"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.emptypes==1" label="归属法人公司" prop="region" :label-width="formLabelWidth">
          <el-select v-if="dataForm.emptypes!=2" clearable v-model="dataForm.region" placeholder="请选择归属公司" style="width: 180px;">
            <el-option v-for="item in companyList" :key="item.legalAccountCode" :label="item.legalCompanyName" :value="item.legalCode">
            </el-option>
          </el-select>
          <el-select v-if="dataForm.emptypes==2" v-model="dataForm.region" clearable multiple collapse-tags placeholder="请选择归属公司" style="width: 180px;">
            <el-option v-for="item in companyList" :key="item.legalAccountCode" :label="item.legalCompanyName" :value="item.legalCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录账号" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="dataForm.userName"></el-input>
        </el-form-item>
        <!-- <p style="text-align: center;font-size: 12px;">请告知员工，默认密码为000000</p> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add(dataForm)">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    let checkPhoneOrEmail = function (rule, value, callback) { //这个对象同时校验phone和email
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
      const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        if (value.indexOf("@") > 0) { //含有字母@
          setTimeout(() => {
            if (mailReg.test(value)) {
              callback()
            } else {
              callback(new Error('邮箱格式不正确'))
            }
          }, 100)
        } else {
          let re = new RegExp(reg);
          if (!re.test(value)) {
            callback(new Error('手机号格式不正确'));
          } else {
            callback();
          }
        }
      }
    };
    return {
      dataForm: {
        employeeName: '',//员工姓名
        radio: '1',//员工业务主体
        emptypes: '',//员工类型
        note: '',//员工备注
        userName: '',//登录账号
        region: ''//归属法人公司
      },
      dataRule: {
        employeeName: [
          { required: true, message: '员工姓名不能为空', trigger: 'blur' }
        ],
        radio: [
          { required: true, message: '员工业务主体不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入11位手机号或邮箱', trigger: 'blur' },
          { validator: checkPhoneOrEmail, trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择归属法人公司', trigger: 'blur' }
        ],
        emptypes: [
          { required: true, message: '请选择员工类型', trigger: 'blur' }
        ],
        note: [
          { required: true, message: '员工备注不能为空', trigger: 'blur' }
        ]
      },
      options: [{
        value: '1',
        label: '分公司财务'
      }, {
        value: '2',
        label: '集团财务'
      }],
      len: '',
      list: [],
      dataList: [],
      companyList: [],
      emptype: [{
        value: '1',
        label: '分公司财务'
      }, {
        value: '3',
        label: '集团财务'
      }],//物业服务
      emptype1: [{
        value: '1',
        label: '分公司财务'
      }, {
        value: '3',
        label: '集团财务'
      }],//到家服务
      value1: '',
      value2: '',
      status: '',
      accountType: '',
      id: '',
      salt: '',
      employeeName: '',
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      formLabelWidth: '140px',
      dialogFormVisible: false
    }
  },
  activated () {
    this.sava()
  },
  methods: {
    //查询
    demand () {
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchFinanceList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          accountType: this.accountType,
          employeeName: this.employeeName
        })
      }).then(({ data }) => {
        console.log(data.list)
        this.dataList = data.list
        this.totalPage = data.total
        this.dataListLoading = false
      })
    },
    //清空
    empty () {
      this.employeeName = ''
      this.accountType = ''
      this.sava()
    },
    //列表
    sava () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchFinanceList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          employeeName: this.employeeName
        })
      }).then(({ data }) => {
        console.log(data.list)
        this.dataList = data.list
        this.totalPage = data.total
        this.dataListLoading = false
      })
    },
    //关闭事件
    closeds () {
      this.dataForm.employeeName = ''
      this.dataForm.emptypes = ''
      this.dataForm.note = ''
      this.dataForm.userName = ''
      this.dataForm.region = ''
      this.dataForm.radio = '1'
      this.list = ''
    },
    //员工类型
    emptypes () {
      this.dataForm.region = ''
    },
    //员工业务主体
    radio () {
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchLegalCompanyList'
        ),
        method: 'get',
        params: {
          type: 1
        }
      }).then((res) => {
        this.companyList = res.data.data
      })
      this.dataForm.emptypes = ''
      this.dataForm.region = ''
    },
    radio1 () {
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchLegalCompanyList'
        ),
        method: 'get',
        params: {
          type: 2
        }
      }).then((res) => {
        this.companyList = res.data.data
      })
      this.dataForm.emptypes = ''
      this.dataForm.region = ''
    },
    // 新增
    addagree () {
      this.dialogFormVisible = true
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchLegalCompanyList'
        ),
        method: 'get',
        params: {
          type: 1
        }
      }).then((res) => {
        this.companyList = res.data.data
      })
    },
    add (e) {
      if (this.dataForm.emptypes == 2) {
        this.list = e.region.join(",")
      } else {
        this.list = e.region
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              '/cassadmin/accountManagement/addLegalUserList'
            ),
            method: 'post',
            data: {
              employeeName: this.dataForm.employeeName,//员工姓名
              employeeNote: this.dataForm.note,//员工备注
              legalCode: this.list,
              legalCompanyCode: this.list,
              userName: this.dataForm.userName,//登录账号
              financeCompanyCode: this.dataForm.emptypes,//员工类型
              type: this.dataForm.radio,//员工业务主体
            }
          }).then((res) => {
            console.log(res.data.success)
            if (res.data.success == 1) {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              console.log(res, '新增')
              this.dialogFormVisible = false
              this.sava()
              this.closeds()
            } else {
              this.$message.error(res.data.errorMsg);
              this.dialogFormVisible = false
              this.sava()
              this.closeds()
            }
          })
        }
      })
    },
    // 禁用
    open (row) {
      this.$http({
        url: this.$http.adornUrl('cassadmin/accountManagement/stopLegalUser'),
        method: 'post',
        data: {
          id: row.id,
          accountType: row.accountType,
          status: 1
        }
      }).then((res) => {
        this.$message({
          showClose: true,
          message: '开启密码成功',
          type: 'success'
        })
        this.sava()
        console.log(res, '开启')
      })
    },
    down (row) {
      this.$http({
        url: this.$http.adornUrl('cassadmin/accountManagement/stopLegalUser'),
        method: 'post',
        data: {
          id: row.id,
          accountType: row.accountType,
          status: 0
        }
      }).then((res) => {
        this.$message({
          showClose: true,
          message: '禁用密码成功',
          type: 'success'
        })
        this.sava()
        console.log(res, '禁用')
      })
    },
    // 重置
    reset (row) {
      this.$http({
        url: this.$http.adornUrl('/cassadmin/accountManagement/originPassword'),
        method: 'post',
        data: {
          id: row.id,
          accountType: row.accountType,
        }
      }).then((res) => {
        console.log(res, '重置')
      })
      this.$message({
        showClose: true,
        message: '重置密码成功',
        type: 'success'
      })
      this.sava()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchFinanceList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          accountType: this.accountType,
          employeeName: this.employeeName
        })
      }).then(({ data }) => {
        console.log(data.list)
        this.dataList = data.list
        this.totalPage = data.total
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/accountManagement/fetchFinanceList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          accountType: this.accountType,
          employeeName: this.employeeName
        })
      }).then(({ data }) => {
        console.log(data.list)
        this.dataList = data.list
        this.totalPage = data.total
        this.dataListLoading = false
      })
    }
  }
}
</script>
<style scoped>
.seacrhMoney {
  width: 100%;
}
.el-form {
  width: 100%;
}
.el-form-item {
  width: 100%;
}
.el-input {
  width: 180px;
}
.el-button--text {
  color: #02a7f0;
}
</style>
<style>
.el-dialog {
  margin-top: 0vh !important;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}
.el-dialog__footer {
  padding-top: 0px !important;
}
.el-select {
  width: 210px;
}
.el-select__tags {
  overflow: hidden;
}
.el-select__tags span {
  display: flex;
}
.el-dialog__body {
  max-height: 400px !important;
  min-height: 100px;
}
.el-tag:nth-child(1) {
  width: 100px; /*要显示文字的宽度*/
  text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
  white-space: nowrap; /*让文字不换行*/
  overflow: hidden; /*超出要隐藏*/
}
</style>
